<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />

    <!-- 样式 -->
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/assets/css/all.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/my.css" />

    <style>
        .visit-hd {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: .64rem;
            background-color: #fff;
            margin-bottom: .08rem;
        }
        
        .visit-hd .res-wrapper {
            width: 40%;
        }
        
        .visit-hd .res-wrapper a {
            float: left;
            text-align: center;
            height: .32rem;
            line-height: .32rem;
            color: #fff;
            background-color: #dfdfdd;
        }
        
        .visit-hd .res-wrapper .me-come {
            width: 50%;
            border-top-left-radius: .16rem;
            border-bottom-left-radius: .16rem;
        }
        
        .visit-hd .res-wrapper .me-from {
            width: 50%;
            border-top-right-radius: .16rem;
            border-bottom-right-radius: .16rem;
            background-color: #ef8ab4;
        }
        
        .me-send {
            width: 40%;
            height: .32rem;
            line-height: .32rem;
            background-color: #dfdfdd;
            text-align: center;
            border-radius: .16rem;
        }
        
        .visit-bd .visit-title {
            display: flex;
            height: .8rem;
            background-color: #ef8ab4;
            align-items: center;
        }
        
        .visit-bd .visit-title .icon {
            width: .6667rem;
            height: .6667rem;
            margin: 0 .1333rem 0 .2133rem;
        }
        
        .visit-bd .visit-title .icon img {
            width: .6667rem;
            height: .6667rem;
        }
        
        .visit-bd .visit-title .tt {
            font-size: .1867rem;
            color: #fff;
            margin-left: .2rem;
        }

        .visit-bd .visit-title .tt h3{
            font-weight: 400;
        }
        
        .visit-bd .visit-cont {
            margin: .2133rem .32rem;
            font-size: .1867rem;
            color: #646464;
        }
        
        .visit-bd .visit-cont li {
            margin-bottom: .1333rem;
            height: .5333rem;
            line-height: .5333rem;
        }

        .visit-bd .visit-cont li a{
            vertical-align: middle;
        }

        .visit-bd .visit-cont li a img{
            width: .3733rem;
            height: .3733rem;
            display: inline-block;
            
        }

        .visit-bd .visit-cont li a span{
            display: inline-block;
            line-height: .4rem;
            width: 80%;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
            margin-left: .1067rem;
        }


        
        .visit-img-container {
            display: flex;
            margin-bottom: .2133rem;
        }
        
        .visit-img-container .visit-img {
            width: 33.33%;
            padding-left: .1875rem;
        }
        
        .header .header-right a img {
            width: .3733rem;
            height: .3733rem;
        }

        /*.empeyOrder {*/
        /*    background-color: #fff;*/
        /*    position: absolute;*/
        /*    bottom: 0;*/
        /*    top: 0.8rem;*/
        /*}*/

        /*.empeyOrder img {*/
        /*    width: 100%;*/
        /*    margin-top: 20vh;*/
        /*}*/

        /*.empeyOrder span {*/
        /*    display: -webkit-box;*/
        /*    display: -webkit-flex;*/
        /*    display: flex;*/
        /*    -webkit-box-pack: center;*/
        /*    -webkit-justify-content: center;*/
        /*    justify-content: center;*/
        /*    padding-bottom: 0.266667rem;*/
        /*}*/
    </style>

    <title>会员聚会记录 - 孝邻会</title>
</head>

<body>
    <!-- 整体页面部分 -->
    <div class="page">
        <!-- 页面头部 -->
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">会员聚会记录 - 孝邻会</div>
                <div class="header-right">
                    <a href="#">
                        <img src="../../static/assets/images/res/13.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <!-- 页面内容-->
        <div class="page-bd">
            <div class="visit-hd">
                <a href="addtrain.html" class="me-send">参加会议-点击入场</a>
            </div>
            <div class="visit-bd">
                <div class="visit-title">
                    <div class="icon">
                        <img src="../../static/assets/images/res/7.png" />
                    </div>
                    <div class="tt">
                        <h3>培训记录汇总</h3>
                    </div>
                </div>
                <div class="visit-cont">
                    <ul class="allBox">
<!--                        <li>-->
<!--                            <a href="#">-->
<!--                                <img src="../../static/assets/images/res/30.png" alt="" />-->
<!--                                <span>深圳市深圳市深圳市深圳市深圳市深圳市深圳市深圳市</span>-->
<!--                            </a>-->
<!--                        </li>-->
                    </ul>
                </div>
            </div>
            
        </div>

        <script id="TagTpl" type="text/html">
            {{each data as result index}}
            <li>
                <a href="#">
                    <img src="../../static/assets/images/res/30.png" alt="" />
                    <span>{{result.addr}}</span>
                </a>
            </li>
            {{/each}}
        </script>
        <!-- 没有热门需求-->
        <script type="text/html" id="emptyTpl">
            <div class="empeyOrder">
                <img src="./static/mobile/default/images/emptyData.png" alt="">
                <span class="fs28 color_3">暂无培训记录</span>
            </div>
        </script>

        <!-- 版权 -->
        <div class="copyright">
            Copyright © 达漂亮<br>
        </div>

    </div>

    <!-- alert弹窗部分 -->
    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>

    <!-- js -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="../../static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>
    <script src="../../static/js/art-template.js"></script>
    <script src="../../static/mobile/default/js/lib/fastclick.js"></script>
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>

    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/js/jquery/lazyload/jquery.lazyload.js"></script>

    <!-- 页面js部分 -->
    <script>
        var nowPage = [],getAgain = [],isLoadend = [];// 这里用数组的原因是可能有tab
        var _type = 'all';
        function getList(isagain) {
            page = nowPage[_type];// 找不到all的属性，page的结果是undefined
            if (typeof(page) == 'undefined') page = 1;// 初始化为第一页
            if (isLoadend[_type] == true ) return false;// 如果到底了，就不在请求了
            // 重新请求
            if (isagain == true){
                if (getAgain[_type] == false) return false;// 内部标记为false，就不用再重新请求了
                getAgain[_type] = false;// 不用再重新请求了
            }else{
                // 显示加载中
                $('.'+_type+'Box').append('<div class="get_list_tip" data-type="'+_type+'">加载数据中...</div>');
            }
            // 默认就到底了
            isLoadend[_type] = true;
            $.ajax({
                url:'https://mp.jianguoes.com/api/res/trainPageList',// 跳转到 action
                data:{page:page,size:10},
                type:'get',
                headers:{'token': $.cookie('code')},
                dataType:'json',
                success:function(res) {
                    // 成功后，表示还没有到底
                    isLoadend[_type] = false;
                    if(res.errno  != 0 ){
                        _alert(res.errmsg);
                        // 获取数据失败，需要重新获取
                        getAgain[_type] = true;
                        $('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
                        return false;
                    }

                    $('.'+_type+'Box').find('.get_list_tip').remove();
                    if (res.data.data.length>0){
                        $('.'+_type+'Box').append(template('TagTpl',res.data));
                    }else{
                        $('.'+_type+'Box').html(template('emptyTpl'));
                    }

                    if (res.data.totalPages == page) {
                        $('.'+_type+'Box').append('<div class="get_list_tip">---我也有底线的---</div>');
                        // 真的到底了
                        isLoadend[_type] = true;
                    }else{
                        // 请求下一页
                        nowPage[_type] = page+1;
                    }
                },error : function() {
                    // 还没有到底
                    isLoadend[_type] = false;
                    // 要重新请求
                    getAgain[_type] = true;
                    $('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
                }
            });
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            // 解决移动端浏览器 300 毫秒点击延迟问题
            FastClick.attach(document.body);

            getList();

            // 重新请求数据
            $(document).on('click','.get_list_tip',function () {
                getList(true);
            });
            // 页面下拉事件
            $('.page-bd').scroll(function(){
                var box_h=$(this).height()
                var content_h=$('.scrollBox').height()
                var scroll_h=$(this).scrollTop();
                if(content_h-box_h-scroll_h<20){
                    getList();
                }
            });
        });
    </script>
</body>

</html>